<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="no-referrer" />
		<title>房价可视化大数据平台</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-table.min.css" />
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/map.css">
	</head>
	<style>
		.title-font{
		  text-align: center;	
		    color: #cdddf7;
		    font-size: 2.5rem;
		    font-weight: 900;
		    letter-spacing: 5px;
		}
		table{
			color: white;
			text-align: center;
		}
		.tab-content{
			margin-top: 1.5rem;
		}
		#loupanpage{
			margin-top: 0rem !important;
			width:100%;
		}
		#xiaoqupage{
			margin-top: 0rem !important;
			width:100%;
		}
		#zufangpage{
			margin-top: 0rem !important;
			width:100%;
		}
		.pagination i{
			color: white !important;
		}
		.pagination text{
			color:white !important;
		}
		#loupan table tr{
			height: 5rem;
			text-align: center;
		}
		
		#xiaoqu table tr{
			height: 5rem;
			text-align: center;
		}
		
		#zufang table tr{
			height: 5rem;
			text-align: center;
		}
		
		table tr td {
			text-align: center;
		}
		.modal.fade.in{
		        top:120px;  
		    }
		.tab-pane{
			margin-top: 1.25rem;
		}
		#ershoutable.table-hover>tbody>tr:hover {
			background-color: saddlebrown!important;
		}
		.fixed-table-pagination{
			color:white;
		}
	</style>
	<body>
		<div class="data">
			<div class="data-title">
				<div class="title-left fl"></div>
				<div class="title-center fl">
					<h3 class="title-font">房价可视化大数据平台</h3>
				</div>
				<div class="title-right fr"></div>
			</div>
			<div class="data-content">
				<div>

					<!-- Nav tabs -->
					<ul class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active"><a href="#ershou" aria-controls="ershou" role="tab" data-toggle="tab">二手房</a></li>
						<li role="presentation"><a href="#loupan" aria-controls="loupan" role="tab" data-toggle="tab">楼盘</a></li>
						<li role="presentation"><a href="#xiaoqu" aria-controls="xiaoqu" role="tab" data-toggle="tab">小区</a></li>
						<li role="presentation"><a href="#zufang" aria-controls="zufang" role="tab" data-toggle="tab">租房</a></li>
					</ul>

					<!-- Tab panes -->
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane fade in active" id="ershou">
							<div class="row">
								<div class="col-md-6">
									<div class="row">
										<div class="col-md-2" style="text-align: center;">
											<label style="color:white">区域</label>
										</div>
										<div class="col-md-2">
											<select class="select" style="border: white solid 0.0625rem;width: 100%;" id="districtSelect"></select>
										</div>
										<div class="col-md-2">
											<select style="border: white solid 0.0625rem;width: 100%;display: none;" id="areaSelect"></select>
										</div>
										<div class="col-md-offset-2 col-md-3">
											<button class="btn btn-primary" onclick="query()" runat="server" >查询</button>
											<button class="btn btn-warning" onclick="reset()">重置</button>
											<button class="btn btn-danger" onclick="retbtn()" >返回</button>
										</div>
									</div>
								</div>
								<div class="col-md-6"></div>
							</div>
							<table id="ershoutable"></table>
<!-- 							<table class="table table-bordered">
								<thead>
									<tr>
										<td>序号</td>
										<td>城市</td>
										<td>区域</td>
										<td>板块</td>
										<td>总价(万)</td>
										<td>建成时间</td>
										<td>户型</td>
										<td>大小</td>
										<td>操作</td>
									</tr>
								</thead>
								<tbody id="ershoutable"></tbody>
							</table>
							<div id="page" class="pagination"></div> -->
						</div>

						<div role="tabpanel" class="tab-pane fade" id="loupan">
							<table class="table table-bordered">
								<thead>
									<tr>
										<td>序号</td>
										<td>城市</td>
										<td>楼盘</td>
										<td>单价 元/平米</td>
										<td>总价</td>
									</tr>
								</thead>
								<tbody id="loupantable"></tbody>
							</table>
							<div id="loupanpage" class="pagination"></div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="xiaoqu">
							<table class="table table-bordered">
								<thead>
									<tr>
										<td>序号</td>
										<td>城市</td>
										<td>区域</td>
										<td>板块</td>
										<td>小区</td>
										<td>价格 元/平米</td>
										<td>在售</td>
									</tr>
								</thead>
								<tbody id="xiaoqutable"></tbody>
							</table>
							<div id="xiaoqupage" class="pagination"></div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="zufang">
							<table class="table table-bordered">
								<thead>
									<tr>
										<td>序号</td>
										<td>城市</td>
										<td>区域</td>
										<td>板块</td>
										<td>小区</td>
										<td>类型</td>
										<td>户型</td>
										<td>大小</td>
										<td>价格 元/月</td>
									</tr>
								</thead>
								<tbody id="zufangtable"></tbody>
							</table>
							<div id="zufangpage" class="pagination"></div>
						</div>
					</div>

				</div>
			</div>
		</div>

		<div class="modal fade" tabindex="-1" role="dialog" id="ershouModal">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">二手房详情</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-6">
								<img id="ershouPic" />
							</div>
							<div class="col-md-6">
								<div class="row">
									<div class="col-md-12">
										<label>城市:</label>&nbsp;&nbsp;&nbsp;
										<span id="city"></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<label>区域:</label>&nbsp;&nbsp;&nbsp;
										<span id="area"></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<label>板块:</label>&nbsp;&nbsp;&nbsp;
										<span id="district"></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<label>总价:</label>&nbsp;&nbsp;&nbsp;
										<span id="total"></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<label>建成:</label>&nbsp;&nbsp;&nbsp;
										<span id="buildtime"></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<label>户型:</label>&nbsp;&nbsp;&nbsp;
										<span id="layout"></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<label>大小:</label>&nbsp;&nbsp;&nbsp;
										<span id="size"></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<label>朝向:</label>&nbsp;&nbsp;&nbsp;
										<span id="direction"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</body>
	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="js/function.js"></script>
	<script src="js/pagination.js"></script>
	<script src="js/list.js"></script>
	
</html>
